<html>

<head>
	<link rel="stylesheet" href="bootstrap-theme.css">
	<link rel="stylesheet" href="bootstrap-theme.min.css">
	<link rel="stylesheet" href="bootstrap.min.css">
	<link rel="stylesheet" href="bootstrap.css">
	<link rel="stylesheet" href="DIY.css">
	<meta charset="UTF-8">
	<style>
		.n {
			box-sizing: border-box;
			outline: none;
		}
		
		.btn1 {
			border: none;
			color: white;
			overflow: hidden;
			margin: 1rem;
			padding: 0;
			text-transform: uppercase;
			width: 150px;
			height: 40px;
		}
		
		.btn-border1.color-1 {
			background-color: transparent;
			border: 2px solid #426fc5;
			color: #426fc5;
		}
		
		.btn-round1 {
			border-radius: 10em;
		}
		
		.material-design1 {
			position: relative;
		}
		
		.material-design1 canvas {
			opacity: 0.25;
			position: absolute;
			top: 0;
			left: 0;
		}

	</style>
	<script src="js/prefixfree.min.js"></script>

</head>

<body>
	<div class="container">
		<ul class="nav nav-tabs">
			<li role="presentation"><a href="User.php">Staff Information</a></li>
			<li role="presentation" class="active"><a href="CheckAttendanceForStaff.php">Check Attendance</a></li>
			<li role="presentation"><a href="Attendancechart.php">Attendance Statistics</a></li>
			<li role="presentation"><a href="DailyAssignmentForStaff.php">Daily Assignment</a></li>
			<li role="presentation"><a href="BulletinForStaff.php">Bulletin</a></li>
			<a class="logout" href="Logout.php">Log out</a>
			<label class="logout">Company Name</label>

		</ul>
		<div class="panel panel-default">

		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Button Field</h3>
			</div>
			<div class="panel-body">
				<div class="Button">
					<form enctype="multipart/form-data" onsubmit="return false;">
						<div class="btn-group btn-group-justified" role="group" aria-label="...">

							<div class="btn-group" role="group">
								<button type="submit" class="n btn1 btn-border1 btn-round1 color-1 material-design1" data-color="#426FC5" name="state" value="work" onclick="test(this);">START</button>
							</div>

							<div class="btn-group" role="group">
								<button type="submit" class="n btn1 btn-border1 btn-round1 color-1 material-design1" data-color="#426FC5" name="state" value="xiaban" onclick="test(this);">FINISH</button>
							</div>
							<div class="btn-group" role="group">
								<button type="submit" class="n btn1 btn-border1 btn-round1 color-1 material-design1" data-color="#426FC5" name="state" value="offday" onclick="test(this);">ASK FOR LEAVE</button>
							</div>
						</div>
					</form>
					<script src="js/index.js"></script>
				</div>
			</div>

		</div>
	</div>
	<script type="text/javascript">
		
		function test(obj) {
		//alert("test function");
		var name = obj.value;
		setTimeout("go('" + name + "')", 700);

	}

	function go(name) {
		/*var data = new Array();*/

		var data = name;
        if(data == "work"){
		    alert("Check in Successfully!");
        }
        else if(data == "xiaban"){
            alert("Have a nice day");
        }
        else if(data == "offday"){
            alert("Take care of yourself");
        }
		/*var txt = document.getElementsByName("state").value;
		data[1] = txt;*/
		//alert(txt);
		/*data = JSON.stringify(data);*/
		var _f = new_form(); 
		create_elements(_f, "d", data); 
		_f.action = "qiandao.php"; 
		_f.submit();

	}

	
	function new_form() {
		var f = document.createElement("form");
		document.body.appendChild(f);
		f.method = "post";
		return f;
	}



	function create_elements(eForm, eName, eValue) {
		var e = document.createElement("input");
		eForm.appendChild(e);
		e.name = eName;
		if (!document.all) {
			e.style.display = 'none';
		}
		e.value = eValue;
		return e;
	}
		
	</script>


</body>

</html>
